<template>
  <el-dialog
  title="预览文章"
  :visible.sync="show"
  width="50%"
  :before-close="handleClose">
  <div class="body">
   <div class="header" style="padding-bottom:10px">
      <h1>{{this.form.title}}</h1>
    <span>
      {{formateDate(this.form.createTime)}}
    </span>
    <span style="margin-left:10px">超级管理员</span>
    <span style="margin-left:10px">
      <i class="el-icon-view"></i>
      {{this.form.visits}}</span>
   </div>
   <div class="container" style="border-top: 1px dashed; padding: 10px" v-html="this.form.articleBody"></div>
  </div>
</el-dialog>
</template>
<script>
import dayjs from 'dayjs'
export default {
  data () {
    return {
    }
  },
  props: {
    show: {
      type: Boolean,
      require: true
    },
    form: {
      type: Object,
      require: true
    }
  },
  mounted () {

  },
  methods: {
    handleClose () {
      this.$emit('noShow')
    },
    // 时间处理函数
    formateDate (value, str = 'YYYY-MM-DD HH:MM:ss') {
      return dayjs(value).format(str)
    }
  }
}
</script>

<style scoped>
.container{
  background-color: #f5f5f5;
}
</style>
